/*
******* Global *******
*/

html, body {
  height: 100%;
  width: 100%;
}

html, body, p, img {
  margin: 0;
  padding: 0;
}

a {
  color: #D22D27;
}

a.nbtn {
  display: inline-block;
  text-decoration: none;
}

body, input, textarea {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/*
* We use button element for accesability purposes but we don't want to use any
* defualt styline
*/
button {
  background-color: transparent;
  border: none;
  color: #000;
  box-sizing: content-box;
  vertical-align: top;
  padding: 0;
  font-size: inherit;
}

.bulletList {
  list-style-type: disc;
  margin-top: 1em;
  padding-left: 40px;
}

.clear {
  clear: both;
}

.backgroundFrame {
  display: none;
}

.bold {
  font-weight: 600;
}

.displaynone {
  display: none !important;
}

.autowidth {
  width: auto !important;
}

/*
******* Global Type Modifiers *****
*/

.small.infoLabel {
  opacity: .6;
}

.small {
  font-size: 80%;
}

/*
******* Context Menu *******
*/

.subMenu {
  display: none;
  overflow: auto;
  max-height: 165px;
  position: absolute;
  left: 100%;
  top: 0;
}

.contextMenu.bottomAligned .subMenu {
  top: auto;
  bottom: 0;
}

.dropdownMenu {
  position: absolute;
  display: none;
  font-size: 12px;
}

.dropdownMenu ul {
  background-color: #FFF;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  cursor: default;
}

.dropdownMenu li {
  height: 30px;
  line-height: 30px;
}

.contextMenu li {
  padding-right: 60px;
  padding-left: 20px;
  position: relative;
  white-space: nowrap;
}

.contextMenu .subMenuOption > div {
  background-image: url('images/vault_4.0/More_Actions_Closed.png');
  background-repeat: no-repeat;
  background-position: right center;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  left: 0;
}

.dropdownMenu .divider {
  border-top: 1px solid #EBEBEB;
}

.dropdownMenu .hover {
  background-color: #F2F2F2;
}

/*
******* Icons *******
* NOTE: This needs to be in newvaultGlobal because the note type dropdown
* uses these styles in the tabDialog
*/

.itemIcon {
  position: relative;
}

.bigIcon, img.smallIcon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

/*
******* Note Icons *******
*/

.noteFormFillIcon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.noteAmex {
  background-color: #0A6353;
}

.noteBank {
  background-color: #4FA553;
}

.noteCredit {
  background-color: #84B750;
}

.noteDatabase {
  background-color: #553597;
}

.noteDiscover {
  background-color: #FF6600;
}

.noteDriversLicense {
  background-color: #424F9F;
}

.noteEmail {
  background-color: #2D84D0;
}

.noteGeneric {
  background-color: #9838B0;
}

.noteHealthInsurance {
  background-color: #E1403F;
}

.noteIM {
  background-color: #11AABC;
}

.noteInsurance {
  background-color: #138F82;
}

.noteMastercard {
  background-color: #CD0001;
}

.noteMembership {
  background-color: #D62B6A;
}

.notePassport {
  background-color: #17A0E5;
}

.noteServer {
  background-color: #C3CC43;
}

.noteSSN {
  background-color: #FCD23E;
}

.noteSoftwareLicense {
  background-color: #FFB716;
}

.noteSSHKey {
  background-color: #FB9214;
}

.noteVisa {
  background-color: #1A1F71;
}

.noteWiFi {
  background-color: #F25D2D;
}

.noteCustom {
  background-color: #3C4A54;
}

/*
******* Form Fill *******
*/

.formFillIcon {
  background-color: #757575;
}

.formFillIconVisa {
  background-color: #191B73;
}

.formFillIconAmex {
  background-color: #AA822D;
}

.formFillIconMastercard {
  background-color: #CC0000;
}

.formFillIconDiscover {
  background-color: #FF6600;
}

/*
******* Attachments *******
*/

.attachmentContainer {
  background-color: #FFF;
}

.attachment {
  background-color: #E6E9EE;
  height: 30px;
  line-height: 30px;
  background-image: url('images/vault_4.0/Attachment_Black.png');
  background-position: 10px center;
  background-repeat: no-repeat;
  padding-left: 40px;
  position: relative;
  cursor: default;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-right: 30px;
  cursor: pointer;
}

.textOverflowContainer {
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  float: left;
  box-sizing: border-box;
}

.deleteAttachment {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 30px;
  background: url('images/vault_4.0/Attachment_Close.png') center center no-repeat;
  cursor: pointer;
}

/*
******* Overlays ********
*/

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(52, 61, 68, 0.6);
  display: none;
}

/*
******* Selecting ********
*/

.noSelect {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.fillHeight {
  height: 100%;
}

/*
******* Action Buttons *******
*/

body .addButton {
  display: inline-block;
  vertical-align: top;
  margin-top: 20px;
  margin-bottom: 20px;
  background-image: url('images/vault_4.0/Plus_for_Add_Button.png');
  background-position: 10px center;
  background-repeat: no-repeat;
  padding-left: 30px;
  width: auto;
}

body .addButton:active {
  padding-left: 30px;
}

.itemButtonCell {
  width: 31px;
  display: none;
  vertical-align: middle;
  text-align: right;
}

.itemButton {
  display: inline-block;
  border: 1px solid #DFE2E7;
  height: 24px;
  width: 24px;
  border-radius: 2px;
  cursor: pointer;
  background-position: center center;
  background-repeat: no-repeat;
}

.itemButton.history {
  background-image: url('images/vault_4.0/History_Item_Button.png');
}

.itemButton.delete {
  background-image: url('images/vault_4.0/Delete.png');
}

.list .itemButton.delete {
  background-image: url('images/vault_4.0/List_Delete.png');
}

.itemButton.share {
  background-image: url('images/vault_4.0/Share.png');
}

.list .itemButton.share {
  background-image: url('images/vault_4.0/List_Share.png');
}

.itemButton.edit {
  background-image: url('images/vault_4.0/Edit.png');
}

.list .itemButton.edit {
  background-image: url('images/vault_4.0/List_Edit.png');
}

.itemButton.rejectShare {
  background-image: url('images/vault_4.0/Reject_Tile.png');
}

.list .itemButton.rejectShare {
  background-image: url('images/vault_4.0/Reject.png');
}

.itemButton.acceptShare {
  background-image: url('images/vault_4.0/Accept.png');
}

.itemButton.email {
  background-image: url('images/vault_4.0/Email.png');
}

.itemButton.restore {
  background-image: url('images/vault_4.0/Restore_Light.png');
}

.list .itemButton.restore {
  background-image: url('images/vault_4.0/Restore_Dark.png');
}

/*
****** Global Hover States ******
*/

/* to middle tone*/
.itemButton:hover, .dialog > .buttons .itemButton:hover, .dialogHeaderButton:hover, .searchCloseButton:hover, .deleteAttachment:hover, .midToneHover:hover {
  background-color: rgba(60, 74, 84, 0.2);
}

/* to dark*/
.dialogHeaderButton:hover, .dialogLeftMenu li:hover:not(.selected), .tabMenuItem:hover:not(.selected){
  background-color: RGBA(0,0,0,0.1);
}

.iconButton:hover, .tourStep:hover, .folderLabel:hover, #skipTour:hover {
  opacity: 0.7;
  cursor: pointer;
}

/*
***** Global Helpers *****
*/

.pullLeft{
  float:left;
}

.pullRight{
  float:right;
}

.noWrap{
  white-space: nowrap;
}

.block{
  display: block;
}

.inline{
  display: inline;
}

.inlineblock{
  display: inline-block;
}

/*
******* Badges *******
*/

.badge{
  display: inline-block;
  padding: 2px 2px;
  margin-right: 6px;
  background: #C2C4C5;
  border-radius: 6px;
  min-width: 6px;
  min-height: 6px;
}

.badge > span{
  margin-left: 4px;
  margin-right: 4px;
}

.badge.success{
  background: #2ecc71;
  color: #FFF;
}

.badge.alert{
  background: #3498db;
  color: #FFF;
}

.badge.warn{
  background: #f39c12;
  color: #d35400;
}

.badge.danger{
  background: #D32D27;
  color: #FFF;
}

.badge.small{
  padding: 1px;
  margin-bottom: 0px;
}

.truncateShort {
    max-width: 120px;
    max-width: 10vw;
    overflow: hidden;
    text-overflow: ellipsis;
}
